/* 循环滚动：开始 */

/* 
f-loop-content：循环滚动
说明：
f-loop-content类实现循环滚动的效果，但周期交替之间有空隙；
应用f-loop-content类的元素是滚动容器，滚动容器必须有且只有一个子元素，称这个元素为内容元素，被滚动内容必须放在内容元素中
 */
 .f-loop-content {
    overflow: hidden;
    position: relative;
    height:30px;
}

/* 如果只是想让滚动容器中的特定元素滚动，请把 * 改为该特定的元素的选择器 */
.f-loop-content>* {
    height: auto;
    position: absolute;

    animation-duration: 4s; /* 循环周期 */
    animation-name: scroll-up;  /* 流动动画 */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
ul li {
    list-style: none;
    height:50px;
}

/* 滚动动画：向上 */
@keyframes scroll-up {
    0% {
        transform: translateY(0%);
        top: 100%;
    }

    100% {
        transform: translateY(-100%);
        top: 0;
    }
}


/* 滚动动画：向左 */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
        left: 100%;
    }

    100% {
        transform: translateX(-100%);
        left: 0;
    }
}

/* 循环滚动：结束 */

.awesome{
    width:100%;
    height:50px;

}